<template>
  <div>
    <el-row>
      <el-col :xs="24" :sm="22" style="text-align:;">
        <el-button class="filter-item" type="primary" @click="save">保存</el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-col :xs="24" :sm="22" style="text-align:right;">
        <el-table :data="tableData" border style="width: 100%" @cell-click="cellClick">

          <el-table-column label="分组" width="200" >
            <template scope="scope">
              <!-- <el-input v-model="scope.row.group_name"  @blur="loseFcous(scope.$index, scope.row)" > </el-input> -->

              <el-select v-model="scope.row.group_name" placeholder="请选择分组">
                <el-option v-for="(d,k) in group_id2names" :label="d.name" :key="k" :value="d.id"></el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column label="手机型号" width="200" >
            <template scope="scope">
              <el-input v-model="scope.row.mobile_model"  @blur="loseFcous(scope.$index, scope.row)" > </el-input>
            </template>
          </el-table-column>

          <el-table-column label="别名" width="200" >
            <template scope="scope">
              <el-input v-model="scope.row.alias"  @blur="loseFcous(scope.$index, scope.row)" > </el-input>
            </template>
          </el-table-column>

          <el-table-column label="设备序列号" width="240" >
            <template scope="scope">
              <el-input v-model="scope.row.equipment_serial_number"  @blur="loseFcous(scope.$index, scope.row)" > </el-input>
            </template>
          </el-table-column>

        </el-table>
      </el-col>
    </el-row>

  </div>

</template>

<script>
  import { batch_add } from '@/api/admin/device'

  export default {
    data()
    {
      return {
        tableData: [
          {
            group_name: '',
            mobile_model: '',
            alias: '',
            equipment_serial_number: ''
          },
          {
            group_name: '',
            mobile_model: '',
            alias: '',
            equipment_serial_number: ''
          },
          {
            group_name: '',
            mobile_model: '',
            alias: '',
            equipment_serial_number: ''
          },
          {
            group_name: '',
            mobile_model: '',
            alias: '',
            equipment_serial_number: ''
          },
        ],
      }
    },

    props: {
      group_id2names: Array
    },

    methods: {
      loseFcous(index, row) {
        // console.log(index,row)
      },

      save() {
        console.log(this.tableData);
        batch_add(this.tableData).then(res => {
          this.$message.success(res.msg)
        }).catch(() => {
          this.$message.success('error')
        })
      },

      cellClick(row, column) {
      },
    },
  }
</script>

<style>
</style>
